<template>
<div>
  <van-card
      v-for="item in userList"
      :key="item.id"
      :title="item.username"
      :desc="item.userAccount"
      :thumb="item.avatarUrl"
      :price="item.planetCode"
      :origin-price="item.phone"
      :currency="item.email"
      :tags="item.tags"
      :show-like="true"

  >
    <template #tags>
      <van-tag v-for="tag in item.tags" :key="tag" style="margin-right: 5px; margin-top: 5px">{{tag}}</van-tag>
    </template>
  </van-card>
</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {onMounted, ref} from "vue";
import myAxios from "../plugins/AxiosConfig.ts";
import qs from "qs";

const router = useRouter()
const query = router.currentRoute.value.query
const {tags}=query;
const mockUserList = [
  {
    id: 1,
    username: "张三",
    userAccount: "zhangsan",
    avatarUrl: "/",
    gender: 1,
    phone: "12345678901",
    email: "1515115qq.com",
    userStatus: "正常",
    userRole: "普通用户",
    planetCode: "11111111",
    tags: ["java", "python"],
    createTime: new Date(),
  },
  {
  id: 2,
  username: "李四",
  userAccount: "lisi",
  avatarUrl: "/",
  gender: 1,
  phone: "12345678901",
  email: "1515115qq.com",
  userStatus: "正常",
  userRole: "普通用户",
  planetCode: "11111111",
  tags: ["java", "python"],
  createTime: new Date()
  }
]
const userList=ref ([]);
onMounted( async () =>{
  // 为给定 ID 的 user 创建请求
  const responseUserList =await myAxios.get('/user/search/tags',{
    withCredentials: false,
    params: {
      tagNameList: tags
    },
    //序列化
    paramsSerializer: {
      serialize: params => qs.stringify(params, { indices: false}),
    }
  }).then(function (response) {
    console.log("response",response)
    return response.data;
  }).catch(function (error) {
    console.log('/user/search/tags 响应错误',error);
  });
  if(responseUserList){
    responseUserList.data.forEach(item=>{
      console.log("item tags",item.tags)
      item.tags=item.tags.split(",");
    })
    userList.value=responseUserList.data;
  }
})



</script>

<style scoped>

</style>